import type { Metadata } from 'next';
import { ScrollX } from '@/components/models/scroll-x';
import Link from 'next/link';
import { notFound, permanentRedirect } from 'next/navigation';
import { CompareTrayBar } from '@/components/compare/compare-tray-bar';
import { CompareButton } from '@/components/compare/compare-button';
import { ViewBeacon } from '@/components/layout/view-beacon';
import { OpennessChip } from '@/components/models/badges';
import { FamilyBenchmarkProgress, FamilyReleaseLanes } from '@/components/models/family-blocks';
import { MiniGraph } from '@/components/models/mini-graph';
import { Chip, EntityBadge, StatusBadge } from '@/components/ui/badges';
import { DataTable, Td, Th } from '@/components/ui/data-table';
import { EntityLink, QualityMark } from '@/components/ui/entity';
import { Hint } from '@/components/ui/hint';
import { Container, Note } from '@/components/ui/section';
import { EmptyState } from '@/components/ui/unavailable';
import { ApiError, apiD1, safe } from '@/lib/api';
import { fmtDate, fmtInt, fmtParams, fmtTokens, num } from '@/lib/format';
import { routes, SITE_NAME, SITE_URL } from '@/lib/site';
import type { FamilyDetail } from '@/lib/types';

type Params = { params: Promise<{ slug: string }> };
export const revalidate = 600;

async function load(slug: string): Promise<FamilyDetail> {
  try {
    return await apiD1.family(slug, 300);
  } catch (e) {
    if (e instanceof ApiError && e.notFound) notFound();
    throw e;
  }
}

function describe(f: FamilyDetail): string {
  const pmin = num(f.param_range?.min);
  const pmax = num(f.param_range?.max);
  const bits = [`${fmtInt(f.model_count)} canonical models`, f.first_release ? `released ${fmtDate(f.first_release)} → ${f.last_release ? fmtDate(f.last_release) : 'today'}` : null, pmin !== null ? `${fmtParams(pmin)}${pmax !== null && pmax !== pmin ? ` – ${fmtParams(pmax)}` : ''} parameters` : null, f.licenses?.length ? `licences ${f.licenses.map((l) => l.key).slice(0, 3).join(', ')}` : null, num(f.artifacts_count) ? `${fmtInt(f.artifacts_count)} artifacts` : null].filter(Boolean);
  return `${f.name}${f.organization ? ` by ${f.organization.name}` : ''} — ${bits.join('; ')}. Release timeline, members, lineage, licence mix and benchmark progress on ${SITE_NAME}.`.slice(0, 300);
}

export async function generateMetadata({ params }: Params): Promise<Metadata> {
  const { slug } = await params;
  const f = await safe(apiD1.family(slug, 5));
  if (!f || f.slug !== slug) return { title: 'Family', robots: { index: false } };
  const title = `${f.name} family — Releases, Members, Lineage & Benchmarks`;
  const description = describe(f);
  const canonical = routes.family(f.slug);
  return { title, description, alternates: { canonical }, openGraph: { title: `${title} | ${SITE_NAME}`, description, url: `${SITE_URL}${canonical}`, type: 'article', siteName: SITE_NAME }, twitter: { card: 'summary_large_image', title, description } };
}

export default async function FamilyPage({ params }: Params) {
  const { slug } = await params;
  const f = await load(slug);
  if (f.slug && f.slug !== slug) permanentRedirect(routes.family(f.slug));
  const bench = await safe(apiD1.benchmarks());
  const benchNames: Record<string, string> = {};
  for (const b of bench?.items ?? []) benchNames[b.slug] = b.name;
  const canonical = routes.family(f.slug);
  const members = [...f.members].sort((a, b) => String(b.key_facts?.release_date ?? '').localeCompare(String(a.key_facts?.release_date ?? '')) || a.model.name.localeCompare(b.model.name));
  const pmin = num(f.param_range?.min);
  const pmax = num(f.param_range?.max);
  const nodes = f.members.map((m) => ({ id: m.model.id, label: m.model.name, href: routes.entity(m.model), sub: num(m.model.attributes?.parameter_count) !== null ? fmtParams(m.model.attributes.parameter_count) : undefined }));
  const licTotal = f.licenses.reduce((n, l) => n + (num(l.models) ?? 0), 0);
  const ranks = Object.entries(f.benchmark_best ?? {}).sort((a, b) => a[1].rank - b[1].rank);
  const root = typeof f.summary?.attributes?.family_root === 'string' ? (f.summary.attributes.family_root as string) : null;
  const ld = { '@context': 'https://schema.org', '@type': 'CreativeWorkSeries', name: f.name, url: `${SITE_URL}${canonical}`, description: describe(f), creator: f.organization ? { '@type': 'Organization', name: f.organization.name } : undefined, hasPart: members.slice(0, 20).map((m) => ({ '@type': 'SoftwareApplication', name: m.model.name, url: `${SITE_URL}${routes.entity(m.model)}` })) };

  return (
    <Container wide>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />
      <ViewBeacon path={canonical} />
      <nav aria-label="Breadcrumb" className="pt-5 text-xs text-ink-3">
        <ol className="flex flex-wrap items-center gap-1.5">
          <li>
            <Link href="/" className="hover:text-ink">
              AI Atlas
            </Link>
          </li>
          <li aria-hidden>/</li>
          <li>
            <Link href={routes.families()} className="hover:text-ink">
              Families
            </Link>
          </li>
          {f.organization && (
            <>
              <li aria-hidden>/</li>
              <li>
                <Link href={routes.entity({ entity_type: 'company', slug: f.organization.slug })} className="hover:text-ink">
                  {f.organization.name}
                </Link>
              </li>
            </>
          )}
          <li aria-hidden>/</li>
          <li className="text-ink-2">{f.name}</li>
        </ol>
      </nav>
      <header className="pb-6 pt-4 md:pt-5" data-family-header>
        <div className="flex flex-wrap items-center gap-2">
          <EntityBadge type="model_family" />
          {!f.canonical && (
            <span className="inline-flex items-center gap-0.5 rounded-[3px] bg-warning-soft px-1.5 text-[11px] font-medium text-warning">
              label-based family
              <Hint text={f.note ?? 'Grouped by the family label stated by sources; not yet a canonical model_family entity. Counts may change when canonicalised.'} />
            </span>
          )}
          {root && root !== f.name && <span className="text-xs text-ink-3">root · {root}</span>}
        </div>
        <div className="mt-3 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
          <div className="min-w-0">
            <h1 className="display text-[30px] md:text-[44px]">{f.name}</h1>
            <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[15px] text-ink-2">
              {f.organization && (
                <Link href={routes.entity({ entity_type: 'company', slug: f.organization.slug })} className="font-medium text-ink hover:text-accent">
                  {f.organization.name}
                </Link>
              )}
              <Link href={`/models?family=${encodeURIComponent(f.slug)}`} className="link">
                All {fmtInt(f.model_count)} models in the terminal →
              </Link>
            </p>
            {f.summary?.description && <p className="mt-3 max-w-3xl text-[15px] leading-relaxed text-ink-2">{f.summary.description}</p>}
          </div>
          {f.summary && (
            <div className="shrink-0 text-xs text-ink-3 lg:text-right">
              <QualityMark q={f.summary.quality?.score} label />
              <p className="mt-1">first seen {fmtDate(f.summary.first_seen_at)}</p>
              <p className="mono mt-0.5 text-[11px]">{f.id}</p>
            </div>
          )}
        </div>
        <dl className="tnum mt-4 grid grid-cols-2 gap-x-6 gap-y-3 border-y border-rule py-3 sm:grid-cols-3 lg:grid-cols-6" data-family-strip>
          {[
            ['Models', fmtInt(f.model_count)],
            ['First release', f.first_release ? fmtDate(f.first_release) : '—'],
            ['Latest release', f.last_release ? fmtDate(f.last_release) : '—'],
            ['Parameters', pmin === null ? '—' : pmin === pmax ? fmtParams(pmin) : `${fmtParams(pmin)} – ${fmtParams(pmax)}`],
            ['Artifacts', fmtInt(f.artifacts_count)],
            ['Providers', fmtInt(f.providers?.length ?? 0)],
          ].map(([k, v]) => (
            <div key={k} className="min-w-0">
              <dt className="eyebrow">{k}</dt>
              <dd className="mt-0.5 truncate text-[15px] font-medium text-ink">{v}</dd>
            </div>
          ))}
        </dl>
      </header>

      <div className="space-y-10 pb-16">
        <section id="releases">
          <p className="eyebrow mb-2">Releases</p>
          <FamilyReleaseLanes members={f.members} />
        </section>

        <section id="members">
          <p className="eyebrow mb-2">
            Members <span className="tnum text-ink-3">{fmtInt(members.length)}</span>
          </p>
          {members.length === 0 ? (
            <EmptyState title="No member recorded" />
          ) : (
            <ScrollX><DataTable caption="Family members" compact>
              <thead>
                <tr>
                  <Th>Model</Th>
                  <Th num>Params</Th>
                  <Th num>Context</Th>
                  <Th>Openness</Th>
                  <Th>Licence</Th>
                  <Th>Released</Th>
                  <Th>Status</Th>
                  <Th>Best rank</Th>
                  <Th className="text-right">
                    <span className="sr-only">Compare</span>
                  </Th>
                </tr>
              </thead>
              <tbody>
                {members.map((m) => {
                  const a = m.model.attributes ?? {};
                  const kf = m.key_facts ?? {};
                  const best = Object.entries(m.benchmark_ranks ?? {}).sort((x, y) => x[1] - y[1])[0];
                  const status = String(kf.status ?? m.model.status ?? '');
                  return (
                    <tr key={m.model.id}>
                      <Td primary>
                        <EntityLink e={m.model} />
                        {m.model.organization && m.model.organization.slug !== f.organization?.slug && <span className="block text-[11px] text-ink-3">{m.model.organization.name}</span>}
                      </Td>
                      <Td num label="Params" className="tnum">
                        {num(a.parameter_count) === null ? <span className="text-ink-3">—</span> : fmtParams(a.parameter_count)}
                        {num(a.active_parameter_count) !== null && num(a.active_parameter_count) !== num(a.parameter_count) && <span className="block text-[11px] text-ink-3">{fmtParams(a.active_parameter_count)} active</span>}
                      </Td>
                      <Td num label="Context" className="tnum">
                        {num(kf.context_length ?? a.context_length) === null ? <span className="text-ink-3">—</span> : fmtTokens(kf.context_length ?? a.context_length)}
                      </Td>
                      <Td label="Openness">{typeof (kf.openness ?? a.openness) === 'string' ? <OpennessChip openness={String(kf.openness ?? a.openness)} /> : <span className="text-ink-3">—</span>}</Td>
                      <Td label="Licence" className="max-w-[10rem] truncate text-xs text-ink-2">
                        {typeof (a.license_key ?? a.license) === 'string' ? <Link href={`/licenses/${encodeURIComponent(String(a.license_key ?? a.license))}`} className="hover:text-accent">{String(a.license_key ?? a.license)}</Link> : <span className="text-ink-3">—</span>}
                      </Td>
                      <Td label="Released" className="tnum whitespace-nowrap text-ink-2">
                        {typeof kf.release_date === 'string' ? fmtDate(kf.release_date) : <span className="text-ink-3">—</span>}
                      </Td>
                      <Td label="Status">
                        <StatusBadge status={status} />
                      </Td>
                      <Td label="Best rank" className="text-xs text-ink-2">
                        {best ? (
                          <Link href={routes.benchmark(best[0])} className="whitespace-nowrap hover:text-accent" title={benchNames[best[0]] ?? best[0]}>
                            <span className="tnum font-medium text-ink">#{fmtInt(best[1])}</span> {(benchNames[best[0]] ?? best[0]).replace('Artificial Analysis ', 'AA ').slice(0, 22)}
                          </Link>
                        ) : (
                          <span className="text-ink-3">—</span>
                        )}
                      </Td>
                      <Td className="text-right">
                        <CompareButton e={m.model} size="sm" label="" />
                      </Td>
                    </tr>
                  );
                })}
              </tbody>
            </DataTable></ScrollX>
          )}
        </section>

        <div className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem]">
          <section id="lineage" className="min-w-0">
            <div className="mb-2 flex items-baseline justify-between gap-2">
              <p className="eyebrow">
                Lineage among members <span className="tnum text-ink-3">{fmtInt(f.lineage.length)} relations</span>
              </p>
              {f.summary && (
                <Link href={`${routes.graph(f.summary.slug)}?mode=lineage`} className="link text-xs">
                  Open in Graph →
                </Link>
              )}
            </div>
            <MiniGraph nodes={nodes} edges={f.lineage} title={`Lineage of the ${f.name} family`} />
          </section>
          <aside className="min-w-0 space-y-8">
            <section id="licences">
              <p className="eyebrow mb-2">Licence mix</p>
              {f.licenses.length ? (
                <ul className="space-y-1.5 text-sm">
                  {f.licenses.map((l) => (
                    <li key={l.key} className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3">
                      <Link href={`/licenses/${encodeURIComponent(l.key)}`} className="truncate text-ink hover:text-accent" title={l.label}>
                        {l.label}
                      </Link>
                      <span className="tnum text-xs text-ink-2">{fmtInt(l.models)}</span>
                      <span className="col-span-2 h-1 rounded-sm bg-surface-2">
                        <span className="block h-full rounded-sm bg-accent" style={{ width: `${licTotal ? (100 * (num(l.models) ?? 0)) / licTotal : 0}%` }} />
                      </span>
                    </li>
                  ))}
                </ul>
              ) : (
                <p className="text-sm text-ink-3">No licence recorded on the members.</p>
              )}
            </section>
            <section id="providers">
              <p className="eyebrow mb-2">
                Providers <span className="tnum text-ink-3">{fmtInt(f.providers?.length ?? 0)}</span>
              </p>
              {f.providers?.length ? (
                <p className="flex flex-wrap gap-x-3 gap-y-1 text-sm">
                  {f.providers.map((p) => (
                    <EntityLink key={p.id} e={p} />
                  ))}
                </p>
              ) : (
                <p className="text-sm text-ink-3">No provider deployment recorded.</p>
              )}
            </section>
            <section id="modalities">
              <p className="eyebrow mb-2">Modalities</p>
              <p className="flex flex-wrap gap-1">{f.modalities?.length ? f.modalities.map((m) => <Chip key={m}>{m}</Chip>) : <span className="text-sm text-ink-3">—</span>}</p>
            </section>
            {ranks.length > 0 && (
              <section id="best-ranks">
                <p className="eyebrow mb-2">Best benchmark ranks</p>
                <ul className="divide-y divide-rule border-y border-rule text-sm">
                  {ranks.slice(0, 8).map(([slug, r]) => (
                    <li key={slug} className="grid grid-cols-[auto_minmax(0,1fr)] items-baseline gap-x-3 py-1.5">
                      <span className="tnum font-medium">#{fmtInt(r.rank)}</span>
                      <span className="min-w-0 truncate">
                        <Link href={routes.benchmark(slug)} className="text-ink hover:text-accent">
                          {benchNames[slug] ?? slug}
                        </Link>
                        <span className="block truncate text-[11px] text-ink-3">{r.model}</span>
                      </span>
                    </li>
                  ))}
                </ul>
              </section>
            )}
          </aside>
        </div>

        <section id="progress">
          <p className="eyebrow mb-2">Benchmark progress</p>
          <FamilyBenchmarkProgress members={f.members} benchNames={benchNames} />
        </section>
        <Note>
          Aggregates are computed from the members' sourced claims; members without a release date or parameter count are left out of the range and timeline rather than guessed. <Link href="/methodology" className="link">Methodology →</Link>
        </Note>
      </div>
      <CompareTrayBar />
    </Container>
  );
}